<script setup lang="ts">

import {ref, watch} from "vue";
import {Category, getAllCategory} from "@/net/controller/category-controller.ts";
import router from "@/router";
import {getUserNotifications} from "@/net/controller/notification-controller.ts";
import {Notification} from "@/net/controller/notification-controller.ts"
import {formatTimestamp} from "../utils/datetime-utils.ts";

const currentPath = ref(location.pathname)
watch(router.currentRoute, () => {
  currentPath.value = location.pathname
})

const currentCatId = () => {
  if (location.pathname.indexOf("cat") != -1) {
    return location.pathname.split("/")[location.pathname.split("/").length - 1]
  } else {
    return '0'
  }
}

/**
 * 所有分类
 */
const cats = ref<Category[]>([])

async function refreshCats() {
  cats.value = await getAllCategory()
}

refreshCats()

const currentSelectedCatId = ref(currentCatId())

watch(currentSelectedCatId, () => {
  if (currentSelectedCatId.value > 0) {
    router.push(`/cat/${currentSelectedCatId.value}`)
  } else {
    router.push('/')
  }
})

const notifications = ref<Notification[]>([])

async function refreshNotifications() {
  notifications.value = await getUserNotifications()
}

refreshNotifications()
</script>

<template>
  <main class="main-container">
    <div class="header-container">
      <el-menu
          :default-active="1"
          mode="horizontal"
          router
          :ellipsis="false"
      >
        <el-menu-item index="0">楽哈论坛</el-menu-item>
        <el-menu-item index="/">首页</el-menu-item>
        <span class="flex-grow-1"/>
        <el-popover
            class="box-item"
            title="站内通知"
            placement="bottom"
        >
          <template #reference>
            <el-menu-item index="/manager">Admin</el-menu-item>
          </template>
          <template #default>
            <div v-for="(item, index) in notifications">
              <p>{{ item.content }}</p>
              <p style="font-size: 12px; color: gray">{{ formatTimestamp(item.createdAt * 1000) }}</p>
            </div>
          </template>
        </el-popover>
      </el-menu>
    </div>

    <div class="flex-grow-1 flex flex-vertical" style="margin-top: 1rem">
      <!-- 分类标签 -->
      <div class="flex flex-horizontal flex-center-horizontally">
        <div
            :class="{'cat-tag': true, 'cat-tag--active': currentSelectedCatId == 0 }"
            @click="currentSelectedCatId = 0"
        >
          全部
        </div>
        <div
            :class="{'cat-tag': true, 'cat-tag--active': currentSelectedCatId == cat.categoryId || currentPath == '/cat/' + cat.categoryId }"
            v-for="(cat, index) in cats"
            :key="index"
            @click="currentSelectedCatId = cat.categoryId"
        >
          {{ cat.name }}
        </div>
      </div>

      <!-- 首页内容 -->
      <RouterView style="padding-left: 20%; padding-right: 20%; margin-top: 1rem" />
    </div>
  </main>
</template>

<style scoped>
.main-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header-container {
  width: 100%;
}

.cat-tag {
  margin-right: 1rem;
  background: #e5e5e5;
  text-align: center;
  padding: .25rem .5rem;
  border-radius: .25rem;
  color: #000;
  cursor: pointer;
  user-select: none;
}

.cat-tag--active {
  background: #000!important;
  color: #fff!important;
}
</style>